.ricons {
  display: flex;
  justify-content: center;
  margin-top: 10px;

  .fbt {
    font-size: 1.4em;
    padding: 0.1em 1em;
  }

  &.confirm > button {
    visibility: hidden;
  }

  .act-confirm {
    visibility: visible;
    position: relative;
    width: 60px;

    .fbt.no {
      padding: 0.1em 0;
      width: 30px;
      text-align: center;
      position: absolute;
      top: 0;
      right: -34px;
    }

    .fbt.yes {
      $act-confirm-shade: mix(#000, $c-accent, 30%);

      position: absolute;
      right: 0;
      top: -3px;
      border-radius: 8px;
      color: #fff;
      text-decoration: none;
      background: $c-accent;
      border-bottom: 5px solid $act-confirm-shade;
      text-shadow: 0 -1px $act-confirm-shade;

      @include transition;

      transform: translate(0px, 0px);

      &:hover {
        filter: brightness(1.07);
      }

      &:active {
        transform: translate(0px, 5px);
        border-bottom-width: 1px;
        text-shadow: 0 0 $act-confirm-shade;
        filter: brightness(1);
      }
    }
  }
}
